<template>
  <div class="comp-examples">
    <el-divider content-position="left">【下拉树】</el-divider>
    <el-form>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="下拉树（基础数据）">
            <RkTreeSelect
              v-model="treeSelectParams.baseValue"
              :dist="{
                name: 'DSY_V_ELE_EXPFUNC',
                params: {
                  condition: `AND T1.YEAR = '2023'`
                }
              }"
            >
            </RkTreeSelect>
          </el-form-item>
          <el-form-item label="下拉树（选中的值）">
            <el-input v-model="treeSelectParams.baseValue" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="下拉树（静态数据）">
            <RkTreeSelect
              v-model="treeSelectParams.staticValue"
              :data="treeSelectData"
              :showCode="false"
              @change="handleChange"
            >
            </RkTreeSelect>
          </el-form-item>
          <el-form-item label="下拉树（选中的值）">
            <el-input v-model="treeSelectParams.staticValue" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="下拉树（枚举数据）">
            <RkTreeSelect
              v-model="treeSelectParams.enumValue"
              enum="EXPERT_INPUT_STATUS"
              :showCode="true"
              @change="handleChange"
            >
            </RkTreeSelect>
          </el-form-item>
          <el-form-item label="下拉树（选中的值）">
            <el-input v-model="treeSelectParams.enumValue" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script setup name="UnoCSSView">
// 组件示例
import RkTreeSelect from '@/components/select/RkTreeSelect.vue'

const treeSelectData = ref([
  {
    value: '1',
    label: 'Level one 1',
    children: [],
  },
  {
    value: '2',
    label: 'Level one 2',
    children: [
      {
        value: '2-1',
        label: 'Level two 2-1',
        children: [
          {
            value: '2-1-1',
            label: 'Level three 2-1-1',
          },
        ],
      }
    ],
  }
])
const treeSelectParams = ref({
  baseValue: '',
  enumValue: '',
  staticValue: ''
})

const handleChange = (value, data) => {
  console.log(value, data)
}

</script>

<style lang="scss" scoped>
.comp-examples {
  padding: 15px;
  padding-top: 0;
}
</style>